<template>
    <div class="div_timeline">
        <div class="block">
            <div id="mute"></div>
            <div class="radio">
                排序：
                <el-radio-group v-model="reverse">
                <el-radio :label="true">倒序</el-radio>
                <el-radio :label="false">正序</el-radio>
                </el-radio-group>
                <el-button type="primary" icon="el-icon-edit" circle class="but" size="mini" @click.native="openTimeline"></el-button>
            </div>
            <el-timeline :reverse="reverse">
                <el-timeline-item
                v-for="(tl, index) in timelines"
                :key="index"
                :color="tl.color"
                :timestamp="tl.created_at"
                type = "success "
                size = "large" 
                placement="top">
                    <el-card>
                        <h4>{{tl.title}}</h4>
                        <p>{{tl.author}} 提交于 {{tl.created_at}}</p>              
                    </el-card>             
                </el-timeline-item>
            </el-timeline>
        </div> 

        <el-dialog title="添加时间轴" :visible.sync="dialogTimelinetVisible" v-loading="timelineLoading">
            <el-form label-width="150px"  :model="timelineForm" :rules="timelineFormRules" ref="timelineForm">
                <el-form-item label="作者" prop="author">
                    <el-col :span="12">
                        <el-input  auto-complete="off" v-model="timelineForm.author" clearable></el-input>
                    </el-col>
                </el-form-item>
                
                <el-form-item label="颜色">
                    <el-color-picker
                    v-model="timelineForm.color"
                    size="medium"
                    :predefine="predefineColors">
                    </el-color-picker>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-col :span="12">
                        <el-input  auto-complete="off" v-model="timelineForm.title" clearable></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="内容" prop="content">
                    <el-col :span="12">
                        <el-input type="textarea" v-model="timelineForm.content"></el-input>
                    </el-col>
                </el-form-item>
             
            </el-form>
            <el-row slot="footer" class="dialog-footer">
                <el-button @click="cancelTimeline">取消</el-button>
                <el-button type="primary" @click="saveTimeline">保存</el-button>
            </el-row>
        </el-dialog>

    </div>


</template>
<script type="text/ecmascript-6">
export default {
    data(){
        return {
            timelines:[],
            mute:false,
            reverse: true,

            dialogTimelinetVisible: false,
            timelineLoading:false,

            //颜色色选择预定义
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585'
            ],
            timelineForm: {
                author: window.user.name,
                color:'#409EFF',
                title:'测试数据3',
                content:'这是内容2',
            },
            timelineFormRules:{
                author: [
                    { required: true, message: '请输入作者', trigger: 'blur' }
                ],
                title:[
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ]
            },
        
           
        };
    },
    methods:{
        //加载时间轴
        loaded(){
            this.mute = true;
            window.axios.get('/api/timeline').then((res) => {
                
                if (res.status === 200) {
                    this.timelines = res.data;
                    this.mute = false;
                }
            });
        },
        //打开窗口
        openTimeline(){
            this.dialogTimelinetVisible = true;
        },
        //关闭窗口
        cancelTimeline() {
            this.$refs.timelineForm.clearValidate();
            this.dialogTimelinetVisible = false;
        },
        //保存时间轴
        saveTimeline(){
            this.$refs.timelineForm.validate((valid) => {
                    if (valid) {
                        this.timelineLoading = true;
                        window.axios.post('/api/timeline/add', this.timelineForm).then((res) => {
                            //console.log(res);
                            this.timelineLoading = false;
                            if (res.data.code == 200) {                               
                                this.$message({
                                    type: 'success',
                                    message: '保存成功'
                                });
                                this.timelines.push(res.data.list); //将添加成功的数据及时显示
                                this.cancelTimeline();
                                
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        }).catch((err) => {
                            console.log(err);
                        });
                    } else {
                        return false;
                    }
            });
        },

    },  
    watch:{
        mute(val) {
            document.getElementById('mute').className = val ? "on" : "";
            }
    },   
    created(){
        this.loaded();

    },
    mounted(){
        //this.loaded();
        //console.log(this.timelines);
    }
    
}
</script>
<style>

.radio {
    height:40px;
    padding:20px 40px;
}
.but{
    float:right;
    padding-left:50px;
    width:35px;
    height:35px;
}
.el-textarea__inner {
    height:100px;
}
</style>

